<script setup>
import { onMounted, ref } from 'vue';
import { getAllArricle } from '@/api/article';
import { ElMessage } from 'element-plus';
const articleList=ref([])
const articleCount=ref(0)
const pageIndex=ref(1)
const pageSize=ref(10)
async function getArticleList(){
    const res=await getAllArricle(pageIndex.value,pageSize.value)
    articleCount.value=res.data.count
    articleList.value=res.data.list
    console.log(res)
}
onMounted(()=>{
    getArticleList()
})

import { deleteArticle } from '@/api/article';

async function deleteArticleFun(id){
    console.log("删除文章："+id)
    const res=await deleteArticle(id)
    console.log(res)
    if(res.code===1){
        ElMessage.success("删除成功")
        getArticleList()
    }
    if(res.code===0){
        ElMessage.error(res.msg)
    }
    getArticleList()
}

import { useRouter } from 'vue-router'

const router=useRouter()
</script>
<template>
  <div class="artice-manage">
    <div class="artice-manage-table">
        <div class="artice-manage-table-title">
            <div class="artice-manage-table-title-item">&nbsp;&nbsp;&nbsp;&nbsp;文章</div>
            <div class="artice-manage-table-title-item">状态</div>
            <div class="artice-manage-table-title-item">&nbsp;&nbsp;&nbsp;&nbsp;操作</div>
        </div>
        <div class="artice-manage-table-body">
            <div class="artice-manage-table-body-item" v-for="item in articleList">
                <div class="artice-manage-table-body-item-info">
                    <div class="artice-manage-table-body-item-info-image">
                        <img :src="'/public/image/'+item.imagePath" alt="">
                    </div>
                    <div class="artice-manage-table-body-item-info-other">
                        <div class="artice-manage-table-body-item-info-other-title">{{item.title}}</div>
                        <div class="artice-manage-table-body-item-info-other-info">{{item.createdTime}}&nbsp;&nbsp;&nbsp;&nbsp;观看:{{item.viewCount}}&nbsp;&nbsp;&nbsp;&nbsp;点赞:{{item.likeCount}}&nbsp;&nbsp;&nbsp;&nbsp;评论:{{item.commentCount}}</div>
                    </div>
                </div>
                <div class="artice-manage-table-body-item-type">
                    <el-tag type="success" v-if="item.status==1">已发布</el-tag>
                    <el-tag type="warning" v-if="item.status==2">保存为草稿</el-tag>
                    <el-tag type="danger" v-if="item.status==3">已删除</el-tag>
                    <el-tag type="info" v-if="item.status==4">仅自己可见</el-tag>
                </div>
                <div class="artice-manage-table-body-item-operate">
                    <div class="artice-manage-table-body-item-operate-item">数据</div>
                    <div class="artice-manage-table-body-item-operate-item" @click="router.push({ name: 'create', params: { id: item.id } });">编辑</div>
                    <div class="artice-manage-table-body-item-operate-item" @click="router.push({ name: 'article', params: { id: item.id } });">浏览</div>
                    <div class="artice-manage-table-body-item-operate-item" v-if="item.status!=3" @click="deleteArticleFun(item.id)">删除</div>
                    <div class="artice-manage-table-body-item-operate-item">分享</div>
                    <div class="artice-manage-table-body-item-operate-item" v-if="item.status==2">发布</div>
                    <div class="artice-manage-table-body-item-operate-item" v-if="item.status==1">仅自己可见</div>
                    <div class="artice-manage-table-body-item-operate-item" v-if="item.status==4">全部可见</div>
                    <div class="artice-manage-table-body-item-operate-item" v-if="item.status==3">恢复</div>
                </div>
            </div>
        </div>
        <div class="artice-manage-table-page">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
    </div>
  </div>
</template>
<style scoped>
.artice-manage{
    width: 100%;
    height: 100%;  
    display: flex;
}
.artice-manage-table{
    margin: 1vh;
    flex: 1;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
}
.artice-manage-table-title{
    height: 5vh;
    display: flex;
    align-items: center;
    line-height: 5vh;
    border-bottom: 1px solid rgb(200, 200, 200);
}
.artice-manage-table-title-item:nth-child(1){
    width: 60%;
}
.artice-manage-table-title-item:nth-child(2){
    width: 10%;
    text-align: center;
    
}
.artice-manage-table-title-item:nth-child(3){
    width: 30%;
}
.artice-manage-table-body{
    flex: 1;
}
.artice-manage-table-page{
    height: 5vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 5vh;
}
.artice-manage-table-body-item{
    height: 10.6vh;
    border-bottom: 1px solid rgb(200, 200, 200);
    display: flex;
    flex-direction: row;
}
.artice-manage-table-body-item:hover{
    background-color: rgb(250, 250, 250);
}
.artice-manage-table-body-item-info{
    width: 60%;
    height: 10.6vh;
    display: flex;
    flex-direction: row;
}
.artice-manage-table-body-item-type{
    width: 10%;
    height: 10.6vh;
    text-align: center;
    line-height: 10.6vh;
}
.artice-manage-table-body-item-operate{
    width: 30%;
    height: 10.6vh;
    line-height: 10.6vh;
    display: flex;
    flex-direction: row;
}
.artice-manage-table-body-item-info-image{
    margin: 1.3vh;
}
.artice-manage-table-body-item-info-other{
    margin: 1.3vh 0px;
}
.artice-manage-table-body-item-info-image>img{
    height: 8vh;
    border-radius: 4px;
}
.artice-manage-table-body-item-info-other-title{
    height: 5vh;
    font-size: 1.8vh;
    cursor: pointer;
}
.artice-manage-table-body-item-info-other-title:hover{
    color: #409eff;
}
.artice-manage-table-body-item-info-other-info{
    height: 3vh;
    line-height: 3vh;
    font-size: 1.4vh;
    color: rgb(127, 129, 130);
}
.artice-manage-table-body-item-operate-item{
    margin: 0px 10px;
    cursor: pointer;
}
.artice-manage-table-body-item-operate-item:hover{
    color: #409eff;
}
</style>